<template>
  <div class="my-tag">
    <input 
    type="text"
    v-if="isEdit"
    ref="inp"
    class="input"
    placeholder="输入标签"
    :value="value"
    v-focus
    @blur="isEdit = false"
    @keyup.enter="handleEnter"
    >

    <div 
    v-else 
    @dblclick="handleClick"
    
    >{{ value }}</div>
  </div>
</template>


<script>

export default {

  props:{
    value:String
  },
  data(){
    return {
      isEdit:false
    }
  },
  methods:{
    handleClick(){
      // 双击了div  需要编辑
      this.isEdit = true

      // JOB1. 通过 ref 获取dom  修改input 的样式 例: 去掉外边框线,增加背景颜色...
      // 自由发挥

    },
    handleEnter(e){
      if(e.target.value.trim() === '') return alert('啥也没写呀!')
      // 编辑框有内容 需要 子传父 让父更新值
      this.$emit('input',e.target.value)
      this.isEdit = false

    }
  }
}
</script>